<template>
    <div id="head">
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <span>
           <el-input v-model="user.username"></el-input>
        </span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      </el-dialog>


      <span class="sp1">图书借阅系统</span>
      {{this.user.username}}<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
      <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="setting" @click="dialogVisible = true">个人信息</el-dropdown-item>
          <el-dropdown-item command="changPwd">修改密码</el-dropdown-item>
          <el-dropdown-item command="logout">注销登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
</template>

<script>
export default {
  name: "Head",
  data(){
    return {
      dialogVisible: false,
      user: {
         username: '',

      }
    }
  },
  mounted() {
       //页面挂载时获取登录信息
       this.user=  JSON.parse( window.sessionStorage.getItem("card"));
       alert(this.user);
  },
  methods:{
    handleCommand(obj){
      //alert(obj);
      switch (obj){
        case 'changPwd':

           break;
        case 'logout':
          if(window.sessionStorage.getItem("card")!=null) {
            window.sessionStorage.removeItem("card");
          }
          this.$router.push("/login");
          break;
        case 'setting':

            break;
      }
    }
  }
}
</script>

<style scoped>
  .sp1{
    font-weight: bold;
    color: white;
    float: left;

  }
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
